<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>角色列表</title>
    <jsp:include page="../common/common.jsp"/>
    <style>
        .searchs{
            padding-top: 20px;
        }
        .w-45p{
            width:45%!important;
        }
        .w-10p{
            width: 10%!important;
            text-align: center;
            line-height: 34px;
        }
        .w-50{
            width:60px!important;
        }
        table{
            font-size:small;
        }
        th{
            font-size:small;
        }
    </style>
</head>
<body>

<div id="main">
    <div class="searchs">
        <!--  id="defaultForm"校检   -->
        <form method="post" class="form-horizontal searchsForm">
            <!-- 下面这个div必须要有，插件根据这个进行添加提示 -->
            <div class="col-lg-4 col-md-4 form-group">
                <label class="col-lg-4 col-md-4 control-label">角色中文名</label>
                <div class="col-lg-8 col-md-8">
                    <input type="text" class="form-control" name="roleName" id="roleName" value=""/>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 form-group">
                <label class="col-lg-3 col-md-3 control-label">角色状态</label>
                <div class="fl w-160">
					<select class="form-control" id="status" name="status">
						<option value="">---请选择---</option>
						<option value="1">启用</option>
						<option value="2">禁用</option>
					</select>
				</div>
            </div>

            <div class="form-group">
                <div class="col-lg-3 col-md-3 col-lg-offset-9 col-md-offset-9">
                    <button id="search" type="button" class="btn btn-primary w-50 fr" style="margin-left: 10px; margin-right: 10px;">搜索</button>
                    <input type="reset" class="btn btn-primary w-50 fr btn-reset" value="重置">
                </div>
            </div>
        </form>
    </div>
    <div id="toolbar">
        <shiro:hasPermission name="roleAdd:view">
            <a class="waves-effect waves-button" href="${webroot}/admin/page/system/roleAdd" ><i class="glyphicon glyphicon-plus"></i> 新增角色</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="roleDelete:action">
            <a class="waves-effect waves-button" onclick="deleteRole();" href="javascript:void(0);" ><i class="glyphicon glyphicon-remove"></i>删除角色</a>
        </shiro:hasPermission>
    </div>

    <table id="table"></table>
</div>
<script>
    var $table = $('#table');
    $(function() {
        $(document).on('focus', 'input[type="text"]', function() {
            $(this).parent().find('label').addClass('active');
        }).on('blur', 'input[type="text"]', function() {
            if ($(this).val() == '') {
                $(this).parent().find('label').removeClass('active');
            }
        });
        // bootstrap table初始化
        // api 链接
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        // 数据格式[json]必须包含：total节点（总记录数），rows节点（分页后数据）
        //即：{“total”:24,”rows”:[…]}
        $table.bootstrapTable({
            //url: webroot+'/static/data/data1.json',
            url: webroot+'/admin/system/queryListRolesData?date='+new Date(),
            height: getHeight(),
            striped: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: true,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            pageList:[10,20,30,40,50],
            classes: 'table table-hover table-no-bordered',
            // 服务端分页
            sidePagination: 'server',
            //silentSort: false,
            //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
            //queryParamsType:'',
            //查询参数（重写参数）,每次调用是会带上这个参数，可自定义  
            //其中 params表示 分页， params.offset, 页码: params.limit 页面大小
            queryParams:function(params) {
                var roleName = $('#roleName').val();
                var status = $('#status').val();
                return {//此处添加查询的分页条件
                    pageNum: params.offset+1==1?1:((params.offset-(params.limit))/10+2),
                    numPerPage: params.limit,
                    roleName:roleName,
                    status:status
                };
            },
            smartDisplay: false,
            idField: 'id',
            //  sortName: 'id',
            // 关闭排序
            sortable: false,
            escape: true,
            idField: 'systemId',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                // field： 对应数据字段
                // title： 标题内容
                // sortable： 是否开启排序
                // halign : 内容垂直居中
                //formatter : 通过formatter可以自定义列显示的内容
                //value：当前field的值，即id
                //row：当前行的数据
                {field: 'state', checkbox: true,formatter:'adminCheckBoxFormat'},
                {field: 'id', title: '编号', sortable: true, align: 'center'},
                {field: 'enName', title: '角色标识', sortable: true, align: 'center'},
                {field: 'zhName', title: '角色中文名', sortable: true, align: 'center'},
                {field: 'createTime', title: '创建时间', sortable: true, align: 'center',formatter:'getCreateTimeFormatterTime'},
                {field: 'status', title: '状态', sortable: true, align: 'center',formatter:'statusformatter'},
                {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
            ]
        }).on('all.bs.table', function (e, name, args) {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
        });
    });

    //条件查询 使用refresh来更新tableb表格
    $('#search').click(function () {
        $table.bootstrapTable('refresh', {url: webroot+'/admin/system/queryListRolesData'});
    });


    function adminCheckBoxFormat(value, row, index) {
        if(row.id==1){
            console.log(this)
            //this.checkbox=false;
        }
    }
    //格式化 状态
    function statusformatter(value, row, index) {
        if(value!=null){
            if(value=='1'){
                return '启用';
            }else if(value=='2'){
                return '禁用';
            }
        }else {
            return '--';
        }
    }
    //格式化a标签
    function actionFormatter(value, row, index) {
        return [
            '<shiro:hasPermission name="updateRolePermission:view"><a class="like" href="${webroot}/admin/page/system/updateRolePermission?roleId='+row.id+'&roleName='+encodeURIComponent(row.zhName)+'" data-toggle="tooltip" title="管理权限"><i class="glyphicon glyphicon-pencil"></i></a></shiro:hasPermission> ',
            '<shiro:hasPermission name="roleUpdate:view"><a class="edit ml10" href="${webroot}/admin/page/system/roleUpdate?roleId='+row.id+'" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a></shiro:hasPermission> '
        ].join('');
    }
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }
    //删除角色
    function deleteRole() {
        // 	返回所选的行，当没有选择任何行的时候返回一个空数组
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            $.confirm({
                type: 'red',
                animationSpeed: 300,
                title: '是否删除这'+rows.length +'个角色？',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button',
                        action: function () {
                            var ids = new Array();
                            for(var i = 0;i < rows.length; i++) {
                                if(rows[i].id == 1){
                                    $.alert('不能删除超级管理员角色！');
                                    return;
                                }
                                ids.push(rows[i].id);
                            }
                            if(ids.length > 0){
                                $.ajax({
                                    url:webroot+'/admin/system/batchDeleteRole',
                                    data:{"ids":ids},
                                    dataType:"json",
                                    type:'POST',
                                    success:function (data) {
                                    	checkResponseData(data,"1",webroot + "/admin/page/system/roleList");
                                    },
                                    error:function () {
                                    	 $.alert({title:"错误", content:"请求删除角色接口错误，请查找原因！"});
                                    }
                                });
                            }
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        }
    }

    $(".form_datetime").datetimepicker({
        //时间格式
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        autoclose:true,
        minView:2,
        todayBtn:true
    });
</script>
</body>
</html>
